<template>
    <div class="app-container">
        <section>
            <div class="contentBox">
                <div class="title">
                    <span>{{$route.query.title}}</span>
                </div>
                <div class="content">
                    <el-form ref="form" :model="form" :rules="rules" class="form"  label-width="110px">
                        <el-form-item v-if="coupon_no" label="优惠券编号:" style="width:100%" >
                            <el-input v-model="coupon_no" readonly="readonly"></el-input>
                        </el-form-item>
                        <el-form-item label="名称:" prop="title" style="width:100%">
                            <el-input v-model="form.title" :readonly="type ? true: false"></el-input>
                        </el-form-item>
                        <el-form-item label="类型:" style="width:100%" prop="off_type">
                            <el-select style="width:250px" clearable v-model="form.off_type" placeholder=""
                            :disabled="type ? true: false"
                            >
                                <el-option label="满减券" value="0"> </el-option>
                                <el-option label="折扣券" value="1"> </el-option>
                             </el-select>
                        </el-form-item>
                        <el-form-item label="使用范围:" prop="coupon_scope_use_id" style="width:100%">
                            <el-select style="width:250px" clearable v-model="form.coupon_scope_use_id" placeholder=""
                            :disabled="type ? true: false"
                            >
                                <el-option label="通用券" value="0"> </el-option>
                                <el-option label="商品券" value="1"> </el-option>
                                <el-option label="项目券" value="2"> </el-option>
                             </el-select>
                        </el-form-item>
                        <el-form-item label="有效时间:" prop="start_time" style="width:100%">
                             <el-input v-model="form.title" :readonly="type ? true: false"></el-input>
                        </el-form-item>
                        <el-form-item v-if="form.off_type == 0" label="满减设置:" prop="min_value" class="timerInput timerInput2">
                            <span class="mrginL">满</span>
                            <el-input type="number"  v-model="form.min_value" :readonly="type ? true: false"></el-input>
                            <span>元</span>
                        </el-form-item>
                        <el-form-item v-if="form.off_type == 0" prop="face_value" class="timerInput timerInput1">
                            <span class="mrginL">减</span>
                            <el-input type="number" v-model="form.face_value" :readonly="type ? true: false"></el-input>
                            <span>元</span>
                        </el-form-item>
                        <el-form-item v-if="form.off_type == 1" label="折扣设置:" prop="discount" class="timerInput" >
                            <el-input type="number" v-model="form.discount" placeholder="请输入" :readonly="type ? true: false"></el-input>
                            <span>折</span>
                        </el-form-item>
                        <el-form-item v-if="form.off_type == 1" label="优惠上限:" prop="max_discount" class="timerInput" >
                            <el-input type="number" v-model="form.max_discount" placeholder="请输入" :readonly="type ? true: false"></el-input>
                            <span>元</span>
                        </el-form-item>
                        <!-- <el-form-item label="数量:" prop="number" class="timerInput" style="width:100%">
                            <el-input type="number" v-model="form.number" placeholder="请输入" :readonly="type ? true: false"></el-input>
                            <span>张</span>
                        </el-form-item> -->
                        <!-- <el-form-item label="门店限制:" style="width:100%" prop="store_ids">
                            <el-select style="width:250px" clearable v-model="store_ids" placeholder="" multiple @change="selectChange" :disabled="type ? true: false">
                                <el-option  v-for="(ele,index) in list" :key="index" :label="ele.title" :value="ele.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="卡券说明:" style="width:100%" prop="remarks">
                            <el-input v-model="form.remarks" placeholder="请输入" type="textarea" :rows="4" :readonly="type ? true: false"></el-input>
                        </el-form-item> -->
                    </el-form>
                    <div style="margin-top:40px">
                        <el-button style="width:110px" @click="$router.go(-1)">取消</el-button>
                        <el-button v-if="!type" type="primary" style="width:110px" @click="save">保存</el-button>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
export default {
    data() {
        return {
            type:"",
            coupon_no:'',
            times:"",
            value1:false,
            editor:'',
            form: {
                id: '',
                title: '',
                min_value: '',
                face_value: '',
                off_type: '',
                coupon_scope_use_id: '',
                start_time:'',
                end_time:'',
                number:'',
                store_ids:'',
                remarks:'',
                discount:'',
                max_discount:''
            },
            store_ids:[],
            rules: {
                title: [
                    { required: true, message: '请输入优惠券标题', trigger: 'blur' },
                ],
                min_value: [
                    { required: true, message: '请输入满减金额', trigger: 'blur' },
                ],
                face_value: [
                    { required: true, message: '请输入优惠金额', trigger: 'blur' },
                ],
                off_type: [
                    { required: true, message: '请选择优惠类型', trigger: 'change' },
                ],
                coupon_scope_use_id: [
                    { required: true, message: '请选择优惠券使用范围', trigger: 'change' },
                ],
                start_time: [
                    { required: true, message: '请选择优惠券有效日期', trigger: 'change' },
                ],
                number: [
                    { required: true, message: '请输入优惠券数量', trigger: 'blur' },
                ],
                store_ids: [
                    { required: true, message: '请选择门店限制', trigger: 'blur' },
                ],
                remarks: [
                    { required: true, message: '请输入卡券说明', trigger: 'blur' },
                ],
                discount: [
                    { required: true, message: '请输入折扣', trigger: 'blur' },
                ],
                max_discount: [
                    { required: true, message: '请输入优惠上限', trigger: 'blur' },
                ],
            },
            roleList: [],
            list:[],
        }
    },
    created() {
        if (this.$route.query.id) {
            this.form.id = this.$route.query.id
            this.getDetails()
        }
         if (this.$route.query.type) {
            this.type = this.$route.query.type
        }
        this.getList()
    },
    mounted() {
    },
    methods: {
        selectChange(e){
            this.form.store_ids = e
        },
        // 获取详情
       async getDetails(){
            let { code, data } = await this.$Http.grantCouponRecord({id:this.form.id,limit:10});
            if (code) {
                let datas = data.data[0]
                this.coupon_no = datas.coupon_no
                this.form.title=datas.title
                this.form.off_type = JSON.stringify(datas.off_type)
                this.form.coupon_scope_use_id = JSON.stringify(datas.coupon_scope_use_id)
                let time = datas.start_time * 1000
                let time1 = datas.end_time * 1000
                this.times=[time,time1]
                this.form.start_time = new Date(time).getTime()
                this.form.end_time = new Date(time1).getTime()
                this.form.number = datas.number
                // this.store_ids = datas.store_ids.map(Number)
                // this.form.store_ids = datas.store_ids.map(Number)
                this.form.remarks = datas.remarks
                if(datas.off_type == 0){
                   this.form.min_value=datas.min_value
                   this.form.face_value=datas.face_value
                }else{
                   this.form.discount = datas.discount
                   this.form.max_discount = datas.max_discount
                }
            }
        },
        pickerDate(e){
            this.form.start_time = this.getdate(e[0])
            this.form.end_time = this.getdate(e[1])
        },
        getdate(time) {
            var now = new Date(time),
            y = now.getFullYear(),
            m = now.getMonth() + 1,
            d = now.getDate();
            return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
        },
        //  获取所有门店
        async getList(){
           let {code,data} = await this.$Http.getAllStore()
            this.list = data
            if(this.list.length && !this.form.id){
                let arr = []
                this.list.forEach((ele)=>{
                  arr.push(ele.id)     
                })
                this.store_ids = arr
                this.form.store_ids = arr
                console.log(this.form.store_ids,"fdf")
            }
       },
        // 新增优惠券
        save() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    this.form.store_ids = this.store_ids.join(",")
                    let {code,data} = await this.$Http.setCoupon(this.form)
                    if (code) {
                        if (this.form.id) {
                            this.$message.success('编辑成功')
                        } else {
                            this.$message.success('添加成功')
                        }
                        this.$router.go(-1)
                    }
                } else {
                    return false;
                }
            });
        },
     
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    section {
        .contentBox {
            background: #fff;
            border-radius: 8px;
            padding: 0px 24px 20px;
            min-width: 700px;
            min-height: calc(100vh - 165px );
            .title {
                line-height: 70px;
                font-size: 18px;
                font-weight: 600;
                color: #383b40;
                .el-icon-close {
                    cursor: pointer;
                }
            }
        }
        .content {
            max-width:700px;
            height: 100%;
            .form {
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
            }
        }
    }
}
::v-deep{
    .el-input{
        width: 250px;
    }
}
.timerInput{
     .el-input{
        width: 120px;
        margin: 0 15px 0 0;
    }
}
.mrginL{
    margin: 0 15px;
}
.timerInput1{
    ::v-deep{
        .el-form-item__content{
            margin-left: 20px !important;
        }
    }
}
.wrap{
    display: flex;
    p{
        margin-right: 20px;
        line-height: 35px;
        border-radius: 4px;
        background: #f1f1f1;
        font-size: 16px;
        padding: 0 20px;
    }
}
p{
    margin: 0;
}
.addTxt{
    color: #1890ff ;
}
</style>